<template>
  <div>
    <div class="top-wrapper">
      {{ menString }}
      <input type="text" @keydown="handleKeyDown" v-model="menString" />
      <button @click="handleClick">新增菜</button>
    </div>
    <div class="bottom-wrapper">
      <div class="bottom-item" v-for="(item, index) in menArr" :key="item">
        {{ item }} <button @click="() => onClickDelete(index)">删除</button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const menArr = ref(["辣子鸡丁"]);
const menString = ref("");
const handleClick = () => {
  if (menString.value) {
    menArr.value.push(menString.value);
    menString.value = "";
  }
};
const onClickDelete = (index) => {
  menArr.value.splice(index, 1);
};

const handleKeyDown = (e) => {
  console.log(e.key);
  if (e.key === "Enter") {
    handleClick();
  }
};
</script>
<style></style>
